<html>
<head>

<script type="text/javascript" src="js/jquery.js"></script>  
<script type="text/javascript" src="js/jquery-ui.js"></script>  

<script>
function findFeed(){
q=$("#feed_url").attr('value');
$("#feed_url").attr("value","please wait...");
$.ajax({
      url: "/find_feed/",
      global: false,
      type: "POST",
      data: ({url : q}),
      success: function(msg){
	if (msg!="None"){
	 $("#feed_url").css("color","black");
         $("#feed_url").attr("value",msg);
	}
	else{
	 $("#feed_url").css("color","red");
         $("#feed_url").attr("value","No feeds found!");
	}
      }
   }
)
}

function suggest_feed(){
q=$("#feed_url").attr('value');
$.post("/suggest_feed/",
    {control_id : "feed_url",div_id:"suggest_feed_div",first_chars:q},
    function(data){
	$("#suggest_feed_div").html(data);
	$("#suggest_feed_div").show("fast");
    }
);
}
</script>

<link type="text/css" href="css/main.css" rel="stylesheet" />
</head>
<body>
<div>
{% if user.is_authenticated %}
<b>{{user.username}}</b> ({{user.get_full_name}})
<a href="/logout/">Logout</a>
{% else %}
<a href="/openid/login">Login</a>
{% endif %}
</div>


<div id="accordion" class="accordion">
<h3><a href="#">Step №1. Select feed</a></h3>
<div style="position: relative;">
Please, enter wanted site's url, and press "Check"-button. Program will automaticaly find rss/atom source.<br />
<input id="feed_url" value="http://" onkeydown='$(this).css("color","black");' onkeyup='javascript:suggest_feed();'/>
<button onclick='javascript:findFeed();'>Check</button><br />
<div id="suggest_feed_div" style="position: absolute; left: 0px; top: 60px;"></div>
<button onclick="$('#accordion').accordion('activate',1);">Next</button>
</div>
<h3><a href="#">Step №2. Construct filter</a></h3>
<div>
You can construct filter here. Input words, separated by commas.<br />
News contain <u>all</u> words:<input /><br />
News contain <u>some</u> words:<input /><br />
News <u>don't</u> contain <u>any</u> word:<input /><br />
<button onclick="$('#accordion').accordion('activate',2);">Next</button><button onclick="$('#accordion').accordion('activate',0);">Back</button>
</div>
<h3><a href="#">Step №3. Select folder for collected news</a></h3>
<div>
Select or create new folder:<br />
<input id="folder_type" type="radio" value="0" selected="true" /><select>
<option>q</option>
<option>w</option>
</select><br />
<input id="folder_type" type="radio" value="1" /><input value="New folder" /><br/>
<button>Done</button><button onclick="$('#accordion').accordion('activate',1);">Back</button>
</div>
</div>
<script type="text/javascript">
  $("#accordion").accordion();
</script>

<div class="main">
{% if user.is_authenticated %}
<h3>Add feed</h3>
<form action="/add_feed/" method="POST">
{{ feedform.as_p }}
<input type="submit" value="Add!" />
</form>
{% endif %}
{% if feeds %}
<h1>Your feeds:</h1>
{% for feed in feeds %}
<h2><b style="cursor:hand" onclick='javascipt:$("#feeddiv{{feed.id}}").toggle(600);'>+</b><a href="{{feed.link}}">{{feed.title}}</a></h2>
<h3>{{feed.subtitle}}</h3>
<div id="feeddiv{{feed.id}}" class="feed">
    {% for entry in feed.entry_set.all %}
	
	<h3><b style="cursor:hand" onclick='javascipt:$("#entrydiv{{entry.id}}").toggle(600);$(this).html("-")'>+</b><a href="{{entry.url}}">{{entry.title}}</a></h3>
	<div id="entrydiv{{entry.id}}" class="entry">
	    <p>{% autoescape off %}{{entry.summary}}{% endautoescape %}</p>
	</div>
    {%  endfor %}
</div>
{% endfor %}
{% endif %}
</div>
</body>
</html>